import { Form, Button, Input, Radio, Checkbox } from 'antd'
import { UploadImage, UploadMultipleImage, UploadVideo } from '@/desktop/components/upload'
import { type MomentContent, MediaType as Type } from '@/services/features/send-moment'
import { type EditingConfig } from '.'
import './EditContent.module.less'

const imageRectLimit = { width: 1300, height: 1000 }
const videoRectLimit = { width: 720, height: 1280 }
const coverImageRectLimit = { width: 1600, height: 1200 }

export default function EditContent(props: {
  config: EditingConfig
  goPrev: (updates: Partial<EditingConfig>) => void
  edited: (updates: Partial<EditingConfig>) => void
}) {
  const { config, goPrev, edited } = props

  const [form] = Form.useForm<MomentContent>()
  const [mediaError, setMediaError] = useState('')
  function submit(content: MomentContent) {
    if (!content.textOnly) {
      if (content.mediaType === Type.Picture && !content.picturePaths.length)
        return void setMediaError('请上传图片')
      if (content.mediaType === Type.Video && !content.videoPath)
        return void setMediaError('请上传视频')
      if (
        content.mediaType === Type.LinkCard &&
        (!content.linkTitle || !content.linkUrl || !content.linkPicturePath)
      )
        return void setMediaError('请完整填写链接内容')
    }
    edited({ content })
  }
  function goPrevWithUpdates() {
    goPrev({ content: form.getFieldsValue() })
  }

  return <div styleName="edit-content">
    <Form
      styleName="form"
      form={form}
      initialValues={config.content}
      onFinish={submit}
      onValuesChange={() => setMediaError('')}
      labelCol={{ span: 3 }}
    >
      <Form.Item<MomentContent>
        shouldUpdate={(prev, curr) => prev.textOnly !== curr.textOnly}
        noStyle
      >
        {({ getFieldValue }) => {
          const textOnly = getFieldValue('textOnly') as boolean
          return <>
            <Form.Item
              key={textOnly.toString()}
              label="文字内容"
              name="text"
              rules={textOnly ? [{ required: true }] : []}
            >
              <Input.TextArea maxLength={5000} autoSize={{ minRows: 5, maxRows: 10 }} />
            </Form.Item>

            <Form.Item name="textOnly" valuePropName="checked" wrapperCol={{ offset: 3 }}>
              <Checkbox>仅文字内容</Checkbox>
            </Form.Item>

            <Form.Item
              label="多媒体内容"
              name="media"
              hidden={textOnly}
              required
              styleName="media-fields"
            >
              <Form.Item name="mediaType" noStyle styleName="media-type">
                <Radio.Group
                  options={[
                    { label: '图片', value: Type.Picture },
                    { label: '视频', value: Type.Video },
                    { label: '链接卡片', value: Type.LinkCard },
                  ]}
                />
              </Form.Item>

              <Form.Item<MomentContent>
                shouldUpdate={(prev, curr) => prev.mediaType !== curr.mediaType}
                noStyle
              >
                {({ getFieldValue }) => {
                  const type = getFieldValue('mediaType') as Type
                  return <>
                    <Form.Item name="picturePaths" noStyle hidden={type !== Type.Picture}>
                      <UploadMultipleImage
                        limit={9}
                        tips={
                          <div>
                            上传图片，JPEG 或 PNG 格式。建议尺寸小于宽度1300px *
                            高度1000px、单张大小不超过 500KB
                            <br />
                            （若发送失败，请尝试缩小图片再发）
                          </div>
                        }
                        rectLimit={imageRectLimit}
                        scale
                      />
                    </Form.Item>
                    <Form.Item name="videoPath" noStyle hidden={type !== Type.Video}>
                      <UploadVideo
                        sizeLimit={50}
                        rectLimit={videoRectLimit}
                        duration={29}
                        tips="上传视频文件，格式为 MP4，时长 29 秒内，分辨率小于 720 * 1280，码率小于 1599kbps"
                      />
                    </Form.Item>
                    <div
                      styleName="media-link-card"
                      style={type === Type.LinkCard ? {} : { display: 'none' }}
                    >
                      <div>
                        <label>链接标题：</label>
                        <Form.Item name="linkTitle" noStyle>
                          <Input />
                        </Form.Item>
                      </div>
                      <div>
                        <label>链接地址：</label>
                        <Form.Item name="linkUrl" noStyle>
                          <Input />
                        </Form.Item>
                      </div>
                      <div>
                        <label>封面图：</label>
                        <Form.Item name="linkPicturePath" noStyle>
                          <UploadImage
                            sizeLimit={0.5}
                            rectLimit={coverImageRectLimit}
                            tips="上传图片，JPEG 或 PNG 格式，尺寸小于 1600 * 1200，单张大小不超过 500KB"
                          />
                        </Form.Item>
                      </div>
                    </div>
                  </>
                }}
              </Form.Item>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 3 }}>
              {mediaError ? <div styleName="media-error">{mediaError}</div> : null}
            </Form.Item>
          </>
        }}
      </Form.Item>

      <footer>
        <Button onClick={goPrevWithUpdates}>上一步</Button>
        <Button type="primary" htmlType="submit">
          下一步
        </Button>
      </footer>
    </Form>
  </div>
}
